由于网速都比较快（看不到效果），打开示例网页后
请按 F12 打开控制台，找到 Network，找到 No throttling 下拉列表中选择 Slow 3G
并且勾选 Disable cache 禁止缓存选项，然后点击刷新即可，具体通过控制台降低网速请查看相关教程。
【尽量复制地址到浏览器中测试（模拟手机），uni-app内置浏览器加载太快了。】


/*
 * 使用方法
 * 主要分为加载前（例如骨架屏）与加载后（正常页面）两部分。
 * 你应该将页面中所有用到的图片都放在 urls 中，视图上通过 urls[x] 来使用。
 */

/*
 * 注意事项
 * 如果图片有加载失败的，可在 @onerror 事件中得到监听与处理，并不影响正常页面显示。
 * 如果你想有图片加载失败后全部都不显示，则去掉 @onerror 监听。
 * 你也可以将该思路进行组件封装
 */

<template>
	<view>
		
		<!-- 加载后(正常页面) -->
		<!-- 这里就是你要正常呈现给用户的页面元素 -->
		<view v-if="loaded">
			<view class="after-content">
				<!-- 失败的图片 -->
				<image :src="urls[0]"></image>
				<!-- END -->
				<image :src="urls[1]"></image>
				<image :src="urls[2]"></image>
			</view>
			
			<view class="after-content">
				<image :src="urls[3]"></image>
				<image :src="urls[4]"></image>
				<image :src="urls[5]"></image>
			</view>
			
			<view class="after-content">
				<image :src="urls[6]"></image>
				<image :src="urls[7]"></image>
				<image :src="urls[8]"></image>
			</view>
		</view>
		<!-- END -->
		
		
		<!-- 加载前(例如骨架屏) -->
		<!-- 这里你需要做一套加载前的骨架屏 -->
		<!-- 或者做其他效果 -->
		<!-- 你有 percent 可以用(它是加载的百分比%) -->
		<view v-else>
			<!-- 正在加载中，当前: {{percent}} % -->
			<!-- 当然也可以变为可视化进度条 -->
			<!-- <view>正在加载中({{percent}})...</view> -->
			<view class="after-content">
				<view class="after-item"></view>
				<view class="after-item"></view>
				<view class="after-item"></view>
			</view>
			
			<view class="after-content">
				<view class="after-item"></view>
				<view class="after-item"></view>
				<view class="after-item"></view>
			</view>
			
			<view class="after-content">
				<view class="after-item"></view>
				<view class="after-item"></view>
				<view class="after-item"></view>
			</view>
		</view>
		<!-- END -->
		
	</view>
</template>

<script>
export default {
	
	data() {
		return {
			loaded: false,
			count: 0,
			
			// 的
			urls: [
				
				// 它是一张加载会失败的图片(异常情况)
				// 会引发控制台打印错误信息
				'https://xxx.gif',
				
				// 下面的都是正常的图片(多放点拖慢加载速度)
				'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2826242742,3026899353&fm=26&gp=0.jpg',
				'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856251795,1266165039&fm=26&gp=0.jpg',
				'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/622762d0f703918fd091b3c4523d269759eec478.jpg',
				'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/d1160924ab18972b8c55b2eee7cd7b899e510aa2.jpg',
				'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=393496326,3808979214&fm=224&gp=0.jpg',
				'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3373176577,3068797494&fm=224&gp=0.jpg',
				'https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/adaf2edda3cc7cd99b7d60843b01213fb80e911e.jpg',
				'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/5882b2b7d0a20cf46036d1a870094b36acaf9926.jpg',
				'https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/00e93901213fb80ee7ca8a7b32d12f2eb9389407.jpg',
				'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3964802384,1496004257&fm=224&gp=0.jpg',
				'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b151f8198618367a021b7f8b2e738bd4b21ce5d2.jpg',
				'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3768986255,1243616948&fm=224&gp=0.jpg',
				'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2564100146,3794385638&fm=26&gp=0.jpg',
				'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2591219492,868851579&fm=224&gp=0.jpg',
				'https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/42166d224f4a20a498b3555390529822730ed0f1.jpg'
			],
			percent: '',
		}
	},
	
	watch: {
		count: function(val, old) {

			// 图片全部加载完成后切换页面
			// [从骨架屏切换回正常页面]
			if (val === this.urls.length) {
                console.log('所有图片加载完毕(包含加载失败的图片)')
				
                // 切换为正常视图
				this.loaded = true
			}
		},
		
		// 动态标题栏(显示加载进度)
		percent: function() {
			uni.setNavigationBarTitle({
				title: `进度: ${this.percent}`
			})
		}
	},
	
	mounted() {
		// 预加载图片
		this.preLoad()
	},
	
	methods: {
		
		/*
		 * 预加载图片
		 * @return void
		 */
		preLoad: function()
		{
			
			// 将所有图片循环遍历
			for (let url of this.urls)
			{
				
				// create image DOM
				let image = new Image()
				image.src = url
				
				// 图片加载完毕事件
				image.onload = () => {
					this.count++
					// 计算图片加载的百分数%(percent)
					let percentNum = this.calculation()
					this.percent = `${percentNum}%`
				}
				
				// 当有图片加载失败事件(即有图片加载出错)
				image.onerror = () => {
                    console.error(`有图片加载出错: ${url}`)
                    this.count++
                    // 计算图片加载的百分数%(percent)
					let percentNum = this.calculation()
					this.percent = `${percentNum}%`
				}
			}
		},


        /*
         * 计算图片加载的百分数%
         * percent
         * @return String
         */
        calculation: function()
        {
            return Math.floor(this.count / this.urls.length * 100)
        }
	}
}
</script>

<style>

/* 加载前(例如骨架屏) */
.after-content{
	display: flex;
	justify-content: space-around;
	margin-bottom: 20rpx;
	margin-top: 20rpx;
}
.after-item{
	background: #d5d5d5;
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
}
/* END */

/* 加载后(正常页面) */
img{
	width: 200px;
	height: 200px;
	border-radius: 20px;
}
/* END */
</style>